---
title: 遷移指南
---

# 遷移指南

## 遷移 RainbowKit

### 2.x.x 重大變更

[wagmi](https://wagmi.sh) 和 [viem](https://viem.sh) 的對等依賴已經達到 `2.x.x` 版本，並且有重大更改。

請遵循以下步驟進行遷移。

**1. 升級 RainbowKit、`wagmi` 和 `viem` 到最新版本**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. 安裝 `@tanstack/react-query` 等級的依賴項**

使用 Wagmi v2 時，[TanStack Query](https://tanstack.com/query/v5/docs/react/overview) 現在是一個必要的對等依賴。

使用以下命令安裝它：

```bash
npm i @tanstack/react-query
```

**3. 升級您的 RainbowKit 和 Wagmi 配置**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. 檢查 `wagmi` 和 `viem` 中的重大變更**

如果您在 dApp 中使用 `wagmi` 鉤子和 `viem` 操作，您將需要遵循 v2 的遷移指南：

- [Wagmi v2 遷移指南](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Viem v2 破壞性變更](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### RainbowKit 變更

**1. 改進 EIP-6963 錢包的行為**

支援最新 EIP-6963 連接標準的錢包（包括 Rainbow、MetaMask 和更多）將自動出現在錢包連接體驗的已安裝部分中。這確保用戶能隨時找到其喜愛的錢包並無衝突地連接到 dApp。

開發者仍然可以完全控制展示優選錢包的自定義錢包列表。建議您繼續將 `injectedWallet` 和 `walletConnectWallet` 包含在您的列表中，以支援所有平台。

**2. 用 getDefaultConfig 進行 Wagmi 配置**

此新 API 簡化了配置體驗，並取代直接使用 Wagmi 的 `createConfig`。鏈配置得到簡化，包括為 `transports` 推斷的公共提供者。

默認錢包列表將自動包含，無需再使用 `getDefaultWallets` 和 `connectorsForWallets`。

您可以通過將匯入或自定義錢包連接器傳遞到 `wallets` 來創建自定義錢包列表。現在不再需要實例化錢包連接器並傳遞 `projectId` 和 `chains`。

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

您不再需要將 `chains` 傳遞給 `<RainbowKitProvider>`。

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. 自定義鏈**

根據 Wagmi v2 的變更，`Chain` 類型已經更改，但仍然支援 RainbowKit 的 `iconUrl` 和 `iconBackground` 中繼數據。

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

使用 `getDefaultConfig` 的範例：

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

使用 `createConfig` 的範例：

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. 自定義錢包**

RainbowKit 錢包連接器經過大幅更改以支援 Wagmi v2。請參考[更新的文檔](https://www.rainbowkit.com/docs/custom-wallets)和[示例連接器](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts)以升級您 dApp 中的自定義錢包連接器。

錢包連接器現在還通過 `rdns` prop 支援 EIP-6963 標準。確保已填充此信息，以防止在您的錢包列表中重複引用支援 EIP-6963 的錢包。

### 1.x.x 重大變更

#### 更新至 wagmi v1

[wagmi](https://wagmi.sh) 的等級依賴項已更新至 `1.x.x`。

請遵循以下步驟進行遷移。

**1. 升級 RainbowKit 和 `wagmi` 到最新版本**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. 安裝 `viem` 等級的依賴項**

wagmi v1 需要 `viem` 的等級依賴項。使用以下命令安裝：

```bash
npm i viem
```

**3. 確保樣式綁定和填充的相容性**

參考我們的[Next.js Webpack 配置](https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next/next.config.js)示例來獲得項目的配置指導。

可在此處獲得 Vite 和 Remix 的附加框架指南：[其他建構工具設置](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup)

**4. 檢查 `wagmi` 中的重大變更**

如果應用程序中使用了 `wagmi` hook，您將需要遵循 `wagmi` 的 v1 遷移指南。

[您可以在此查看其遷移指南](https://wagmi.sh/react/migration-guide)。

### 0.12.x 重大變更

wagmi 的等級依賴項已更新至 `0.12.x`。

RainbowKit 已採納 `WalletConnectLegacyConnector` 連接器以持續支援 WalletConnect v1。對 WalletConnect v2 和 `WalletConnectConnector` 的支援很快將作為修補釋出而無重大變更。

將在未來的版本中自動過渡錢包。

現在，每個 dApp 必須提供 [WalletConnect Cloud](https://cloud.walletconnect.com/) 的 `projectId` 以開啟 WalletConnect v2 功能。需在 2023 年 6 月 28 日 WalletConnect v1 桥服務器關閉之前完成。現若未指定 `projectId`，RainbowKit 將靜默偏好所有錢包的 v1。

請遵循以下步驟進行遷移。

#### 1. 升級 RainbowKit 和 `wagmi` 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. 提供 WalletConnect Cloud projectId

每個依賴 WalletConnect 的 dApp 現在需要從 [WalletConnect Cloud](https://cloud.walletconnect.com/) 獲得 `projectId`。這是完全免費的，只需幾分鐘就可以完成。

將 `projectId` 提供給 `getDefaultWallets` 和類似的 individuell RainbowKit 錢包連接器：

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.x 重大變更

wagmi 的等級依賴項已更新至 `0.11.x`。

請遵循以下步驟進行遷移。

#### 1. 升級 RainbowKit 和 `wagmi` 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. 檢查 `wagmi` 中的重大變更

如果應用程式中使用了 `wagmi` hook，您將需要檢查您的應用程式是否受到 `wagmi` 的重大變更影響。

[您可以在此查看其遷移指南](https://wagmi.sh/react/migration-guide#011x-breaking-changes)。

### 0.10.x 重大變更

wagmi 的等級依賴項已更新至 `0.10.x`。

請遵循以下步驟進行遷移。

#### 1. 升級 RainbowKit 和 `wagmi` 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. 檢查 `wagmi` 中的重大變更

如果應用程式中使用了 `wagmi` hook，您將需要檢查您的應用程式是否受到 `wagmi` 的重大變更影響。

[您可以在此查看其遷移指南](https://wagmi.sh/react/migration-guide#010x-breaking-changes)。

### 0.9.x 重大變更

wagmi 的等級依賴項已更新至 `0.9.x`。

請遵循以下步驟進行遷移。

#### 1. 升級 RainbowKit 和 `wagmi` 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. 檢查 `wagmi` 中的重大變更

如果應用程式中使用了 `wagmi` hook，您將需要檢查您的應用程式是否受到 `wagmi` 的重大變更影響。

[您可以在此查看其遷移指南](https://wagmi.sh/react/migration-guide#09x-breaking-changes)。

### 0.8.x 重大變更

wagmi 的等級依賴項已更新至 `0.8.x`。

請遵循以下步驟進行遷移。

#### 1. 升級 RainbowKit 和 `wagmi` 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. 檢查 `wagmi` 中的重大變更

如果應用程式中使用了 `wagmi` hook，您將需要檢查您的應用程式是否受到 `wagmi` 的重大變更影響。

[您可以在此查看其遷移指南](https://wagmi.sh/react/migration-guide#08x-breaking-changes)。

### 0.7.x 重大變更

如果您正在創建一個自定義的錢包列表，現在必須單獨匯入每個錢包，以減少束大小。請注意，由於錢包不再通過 `wallet` 對象命名空間化，所有的錢包現都帶有 `Wallet` 後綴。

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

還請注意 Steakwallet 的向後相容層已被移除。應用程序應使用 Omni。

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x 重大變更

RainbowKit 已更新 `wagmi` 的等級依賴項至 `0.5.x`。

請遵循以下步驟進行遷移。

#### 1. 升級依賴

升級 RainbowKit 和 wagmi 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. 檢查 `wagmi` 中的重大變更

如果應用程式中使用了 `wagmi` hook，您將需要檢查您的應用程式是否受到 `wagmi` 的重大變更影響。

[您可以在此查看其遷移指南](https://wagmi.sh/react/migration-guide#05x-breaking-changes)。

### 0.3.x 重大變更

已從 `Wallet` 類型的 `createConnector` 中移除 `chainId` 參數。

**請注意，所有內建錢包都在使用新 API。大多數消費者不會受到影響。此更改僅影響已創建或消費[自定義錢包](/docs/custom-wallets)的消費者。**

如果您先前在 `createConnector` 中從 `chainId` 派生 RPC URLs，現在可以刪除該邏輯，因為 `wagmi` 在使用 `configureChains` 時內部處理 RPC URLs。

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x 重大變更

RainbowKit 已更新 `wagmi` 的等級依賴項至 `^0.4`。

請遵循以下步驟進行遷移。

#### 1. 升級依賴

升級 RainbowKit 和 wagmi 到最新版本

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. 替換 configureChains 匯入

從 wagmi 而非 RainbowKit 匯入 `configureChains`：

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. 遷移提供者

RainbowKit 不再匯出 `apiProvider` API。用您想要的 wagmi 提供者替換它。

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

從 `wagmi/providers/alchemy` 匯入 `alchemyProvider`。

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

從 `wagmi/providers/infura` 匯入 `infuraProvider`。

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

從 `wagmi/providers/jsonRpc` 匯入 `jsonRpcProvider`。

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### 公共提供者

從 `wagmi/providers/public` 匯入 `publicProvider`。

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. 重命名 wagmi 的提供者

將 `WagmiProvider` 重命名為 `WagmiConfig`。

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

完成啦！🌈
